<template>
  <view class="main">
    <view class="item">
      <view>最早收货时间</view>
      <view class="right" @click="show1 = true"> {{ dayjs(formData.startDate).format("MM-DD HH:mm") }} <u-icon name="arrow-right"></u-icon></view>
    </view>
    <view class="item">
      <view>最晚收货时间</view>
      <view class="right" @click="show2 = true"> {{ dayjs(formData.endDate).format("MM-DD HH:mm") }} <u-icon name="arrow-right"></u-icon></view>
    </view>
    <view class="bottomBox">
      <view class="btn-type">提交</view>
    </view>
    <u-datetime-picker :show="show1" v-model="formData.startDate" mode="datetime" @confirm="show1 = false" @cancel="show1 = false"></u-datetime-picker>
    <u-datetime-picker :show="show2" v-model="formData.endDate" mode="datetime" @confirm="show2 = false" @cancel="show2 = false"></u-datetime-picker>
  </view>
</template>

<script setup lang="ts">
import dayjs from "dayjs";
import { ref } from "vue";
const show1 = ref(false);
const show2 = ref(false);
const formData = ref({
  startDate: Date.now(),
  endDate: Date.now(),
});
</script>

<style lang="less" scoped>
.main {
  background: #fff;
  border-radius: 16rpx;
  padding: 0 32rpx;
  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 26rpx;
    line-height: 36rpx;
    color: #333333;
    border-bottom: 1px solid #f9f9f9;
    padding: 32rpx 0;
    .right {
      display: flex;
      align-items: center;
      color: #bebebe;
    }
    &:last-child {
      border-bottom: none;
    }
  }
}
.bottomBox {
  .btn-type {
    width: 100%;
    border-radius: 32rpx;
    border: 2rpx solid #dddee2;
    font-size: 28rpx;
    color: #fff;
    line-height: 50rpx;
    text-align: center;
    padding: 12rpx 24rpx;
    margin-right: 20rpx;
    &:last-child {
      margin-right: 0;
    }
    background: linear-gradient(90deg, #69e07d 0%, #2ed19a 33%, #1bbd7e 100%);
  }
}
</style>
